<template>
  <div class="container">
    <div class="mainContent">
      <div :class="['header', activeType === 'all' ? 'flex_bet' : '']">
        <div class="searchArea">
          <div class="leftInput" @click="handleIntoSearchPage">
            <div class="searchIcon"></div>
            <input type="text" v-model="searchInput" placeholder="搜索姓名" placeholder-style="color: #171717;font-weight: bold;" >
          </div>
          <div class="clearIcon" @click="handleClearSearch"></div>
        </div>
        <div class="searchBtn" @click="handleIntoSearchCondition">
          <div class="tip">筛选</div>
          <div class="turn_down_icon"></div>
        </div>
      </div>
      <div v-if="studentList.length > 0" class="studentList">
        <div v-for="(item, index) of studentList" :key="index" class="studentItem" @click="handleLookStudentDetail(item)">
          <img v-if="item.studentInfo.avatar" class="itemAvatar" :src="item.studentInfo.avatar" alt="">
          <img v-else class="itemAvatar" src="/static/images/defaultAvatar.png" alt="">
          <div class="rightMsg">
            <div class="topArea">
              <div class="name">{{ item.studentInfo.name ? item.studentInfo.name : '' }}</div>
              <div class="gender">{{ item.studentInfo.sex === 1 ? '男' : (item.studentInfo.sex === 2 ? '女' : '未知' ) }}</div>
            </div>
            <div class="bottomArea">
              <div class="leftData">{{ item.title + ' | ' + (item.studentInfo.gradeId === 1 ? '高一' : (item.studentInfo.gradeId === 2 ? '高二' : '高三')) + item.studentInfo.className + ' | ' +  '学生' }}</div>
              <div v-if="item.isVIP === 1" class="activeStatus isActive">已激活</div>
              <div v-else-if="item.isVIP === 0" class="activeStatus notActive">未激活</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="noData">暂无数据~~</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeType: '', // 激活状态   isActive --> 已激活   notActive --> 未激活   all --> 全部学生
      searchInput: '',
      studentList: [],
      totalPages: null,
      actStatus: null,
      StudentListParams: {
        className: null,
        gradeId: null,
        isVIP: null,
        pageNo: 1,
        pageSize: 10
      },
      listBySearchParams: {
        className: null,
        gradeId: null,
        isVIP: null,
        name: '',
        pageNo: 1,
        pageSize: 10
      },
      optionSearch: null
    }
  },
  onLoad (option) {
    this.activeType = option.activeType
    // 设置导航标题
    if (this.activeType === 'isActive') {
      wx.setNavigationBarTitle({
        title: '已激活'
      })
      this.StudentListParams.isVIP = 1
      this.listBySearchParams.isVIP = 1
    } else if (this.activeType === 'notActive') {
      wx.setNavigationBarTitle({
        title: '未激活'
      })
      this.StudentListParams.isVIP = 0
      this.listBySearchParams.isVIP = 0
    } else {
      wx.setNavigationBarTitle({
        title: '我的学生'
      })
      this.StudentListParams.isVIP = null
      this.listBySearchParams.isVIP = null
    }

    if (option.search) {
      this.searchInput = option.search
      this.listBySearchParams.name = option.search
      this.listBySearchParams.pageNo = 1
      this.studentList = []
      this.getListBySearch('one')
    } else if (wx.getStorageSync('searchInput')) {
      this.searchInput = wx.getStorageSync('searchInput')
      this.listBySearchParams.name = wx.getStorageSync('searchInput')
      this.listBySearchParams.pageNo = 1
      this.studentList = []
      this.getListBySearch('one')
    } else {
      this.searchInput = ''
      this.StudentListParams.pageNo = 1
      this.studentList = []
      if (!wx.getStorageSync('isInSearchCondition')) {
        this.StudentListParams.gradeId = null
        this.StudentListParams.className = null
        this.listBySearchParams.gradeId = null
        this.listBySearchParams.className = null
      }
      this.getStudentList('one')
    }
  },
  onShow () {
    if (wx.getStorageSync('isInSearchCondition')) {
      if (wx.getStorageSync('searchConditionObj')) {
        const data = JSON.parse(wx.getStorageSync('searchConditionObj'))
        if (data.gradeId && data.gradeId !== 'null') {
          this.StudentListParams.gradeId = parseInt(data.gradeId)
          this.listBySearchParams.gradeId = parseInt(data.gradeId)
        } else {
          this.StudentListParams.gradeId = null
          this.listBySearchParams.gradeId = null
        }
        if (data.className && data.className !== '全部') {
          this.StudentListParams.className = data.className
          this.listBySearchParams.className = data.className
        } else {
          this.StudentListParams.className = null
          this.listBySearchParams.className = null
        }
        if ((data.status || data.status === 0) && data.status !== 'null') {
          this.StudentListParams.isVIP = data.status
          this.listBySearchParams.isVIP = data.status
        } else {
          this.StudentListParams.isVIP = null
          this.listBySearchParams.isVIP = null
        }
      }
      if (wx.getStorageSync('searchInput')) {
        this.searchInput = wx.getStorageSync('searchInput')
        this.listBySearchParams.name = wx.getStorageSync('searchInput')
        this.listBySearchParams.pageNo = 1
        this.studentList = []
        this.getListBySearch('one')
      } else {
        this.searchInput = ''
        this.StudentListParams.pageNo = 1
        this.studentList = []
        this.getStudentList('one')
      }
    }
  },
  onUnload () {
  },
  onReachBottom () {
    if (this.searchInput !== '') {
      // 带参数查询列表
      if (this.listBySearchParams.pageNo >= this.totalPages) {
        wx.showToast({
          title: '数据加载完了..',
          icon: 'none'
        })
      } else {
        // 下一页
        this.listBySearchParams.pageNo = this.listBySearchParams.pageNo + 1
        this.getListBySearch()
      }
    } else {
      // 不带参数
      if (this.StudentListParams.pageNo >= this.totalPages) {
        wx.showToast({
          title: '数据加载完了..',
          icon: 'none'
        })
      } else {
        // 下一页
        this.StudentListParams.pageNo = this.StudentListParams.pageNo + 1
        this.getStudentList()
      }
    }
  },
  onPullDownRefresh () {
    if (this.searchInput !== '') {
      // 带参数查询列表
      this.listBySearchParams.pageNo = 1
      this.studentList = []
      this.getListBySearch('one')
    } else {
      // 不带参数
      this.StudentListParams.pageNo = 1
      this.studentList = []
      this.getStudentList('one')
    }
  },
  methods: {
    handleClearSearch () {
      wx.removeStorageSync('searchInput')
      this.searchInput = ''
      this.listBySearchParams.name = ''
      this.StudentListParams.pageNo = 1
      this.studentList = []
      this.getStudentList()
    },
    handleIntoSearchPage () {
      if (this.activeType === 'all') {
        wx.navigateTo({ url: '../studentSearch/main?activeType=' + this.activeType })
      } else {
        wx.redirectTo({ url: '../studentSearch/main?activeType=' + this.activeType })
      }
    },
    getStudentList (type) {
      this.$httpWX.post({
        url: '/academy/teacher/getInformations',
        data: this.StudentListParams,
        header: {
          'content-type': 'application/json', // 默认值
          'accessToken': wx.getStorageSync('tokens')
        }
      }).then(res => {
        const arr = res.data.list
        if (type === 'one') {
          this.studentList = arr
        } else {
          this.studentList = this.studentList.concat(arr)
        }
        this.totalPages = res.data.pages
      })
    },
    getListBySearch (type) {
      this.$httpWX.post({
        url: '/academy/teacher/getInformations',
        data: this.listBySearchParams,
        header: {
          'content-type': 'application/json', // 默认值
          'accessToken': wx.getStorageSync('tokens')
        }
      }).then(res => {
        const arr = res.data.list
        if (type === 'one') {
          this.studentList = arr
        } else {
          this.studentList = this.studentList.concat(arr)
        }
        this.totalPages = res.data.pages
      })
    },
    // 查看详情
    handleLookStudentDetail (item) {
      const url = '../myStudentDetail/main?userId=' + item.userId + '&type=' + item.professionVo.profession
      wx.navigateTo({ url: url })
    },
    handleIntoSearchCondition () {
      wx.navigateTo({ url: '../studentSearchCondition/main' })
    }
  }
}
</script>

<style lang="less" scoped>
  .mainContent {
    padding: 0 30rpx 50rpx;
    .header {
      padding: 23rpx 0 21rpx;
      margin-bottom: 25rpx;
      .searchArea {
        width: 100%;
        height: 56rpx;
        background: #F5F5F5;
        border-radius: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx 0 20rpx;
        box-sizing: border-box;
        .leftInput {
          flex: 1;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .searchIcon {
            width: 30rpx;
            height: 30rpx;
            background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -1270rpx -2015rpx;
            background-size: 746rpx 350rpx;
            margin-right: 20rpx;
          }
          input {
            color: #171717;
            font-size: 30rpx;
            flex: 1;
            letter-spacing: 2rpx;
          }
        }
        .clearIcon {
          width: 30rpx;
          height: 30rpx;
          background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -1315rpx -2015rpx;
          background-size: 746rpx 350rpx;
          margin-left: 30rpx;
        }
      }
      .searchBtn {
        display: none;
      }
    }
    .flex_bet {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .searchArea {
        width: 560rpx;
      }
      .searchBtn {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .tip {
          color: #171717;
          font-weight: bold;
          font-size: 30rpx;
          margin-right: 10rpx;
        }
        .turn_down_icon {
          width: 20rpx;
          height: 15rpx;
          background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -683rpx -1950rpx;
          background-size: 746rpx 350rpx;
        }
      }
    }
    .studentList {
      .studentItem {
        width: 100%;
        height: 150rpx;
        border: 1rpx solid #E5E5E5;
        border-radius: 10rpx;
        padding: 0 29rpx 0 18rpx;
        margin-bottom: 24rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 20rpx;

        .itemAvatar {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          margin-right: 36rpx;
        }
        .rightMsg {
          flex: 1;
          .topArea {
            padding-top: 17rpx;
            margin-bottom: 20rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .name {
              color: #171717;
              font-size: 28rpx;
              font-weight: bold;
              margin-right: 54rpx;
              min-width: 90rpx;
            }
            .gender {
              color: #171717;
              font-size: 28rpx;
              font-weight: bold;
            }
          }
          .bottomArea {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .leftData {
              flex: 1;
              color: #999;
              font-size: 24rpx;
            }
            .activeStatus {
              width: 90rpx;
              height: 40rpx;
              line-height: 40rpx;
              border-radius: 20rpx;
              font-size: 22rpx;
              text-align: center;
            }
            .isActive {
              background: #FFAD0D;
              color: #fff;
            }
            .notActive {
              background: #F7F7FA;
              color: #C7C7C7;
            }
          }
        }
      }
    }
    .noData {
      color: #999999;
      font-size: 30rpx;
      text-align: center;
    }
  }
</style>
